<script setup lang="ts">
import { ref } from "vue";
// 接收父元素的传递下来的值
const props = defineProps(["tid"]);
// 2.1注册子传父事件
const emit = defineEmits(["addTodo"]);
const content = ref();
// 点击事件传值给父组件
const emitAddTodo = () => {
  // 1.创造数据
  const todo = {
    id: props.tid,
    content: content.value,
    completed: false,
  };
  // 2.提交事件
  emit("addTodo", todo);
  content.value = "";
};
</script>

<template>
  <div>
    <!-- 输入框 -->
    <h1>欢迎使用Todo List</h1>
    <div class="add-todo">
      <input
        type="text"
        name="todo"
        v-model="content"
        @keyup.enter="emitAddTodo"
      />
      <button @click="emitAddTodo">
        <!-- 按钮上的加号元素 -->
        <i class="add-icon"></i>
      </button>
    </div>
  </div>
</template>

<style scoped></style>
